import {QuestionCircleOutlined} from '@ant-design/icons';
import {Button, Divider, Input, message, Popconfirm, Select} from 'antd';
import React, {useState, useRef, useEffect} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';


import {queryRule, updateStatus,updateDescription} from './service';
import Access from '@/components/Access/Access';

const TableList = (props) => {
  const actionRef = useRef();
  const formRef = useRef();
  const [count, setCount] = useState();
  const [description, setDescription] = useState();
  useEffect(() => {
  }, []);

  const saveDescription = async (e) => {
    try {
      if (description){
        updateDescription({
          id:e.id,
          description
        }).then(res=>{
          setDescription(null);
          actionRef.current.reload();
        });
      }
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };
  const columns = [
    {
      title: '视频ID',
      dataIndex: 'id',
    },
    {
      title: '视频介绍',
      hideInSearch:true,
      dataIndex: 'description',
      render: (dom, record) => {
        return <Input
          placeholder={record.description}
          onChange={(e) => setDescription(e.target.value)}
          onPressEnter={()=>saveDescription(record)}
          onBlur={()=>saveDescription(record)}
        />;
      },
    },
    {
      title: '宽度',
      hideInSearch:true,
      dataIndex: 'width',
    },
    {
      title: '高度',
      hideInSearch:true,
      dataIndex: 'height',
    },
    {
      title: '时长',
      hideInSearch:true,
      dataIndex: 'duration',
    },
    {
      title: '大小',
      hideInSearch:true,
      dataIndex: 'size',
    },
    {
      title: '评论数',
      hideInSearch:true,
      dataIndex: 'commonNum',
    },
    {
      title: '点赞人数',
      hideInSearch:true,
      dataIndex: 'likeNum',
    },
    {
      title: '会员名',
      hideInSearch:true,
      dataIndex: 'memberName',
    },
    {
      title: '会员卡号',
      hideInSearch:true,
      dataIndex: 'memberNumber',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        0: {
          text: '待审核',
          status: 'Processing',
        },
        1: {
          text: '审核通过',
          status: 'Success',
        },
        2: {
          text: '审核拒绝',
          status: 'Error',
        },
        3: {
          text: '视频下架',
          status: 'Default',
        },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <Access accessKey={"@seeVideo"}>
            <a
              onClick={() => {
                window.open(record.url)
              }}
            >
              查看视频
            </a>
          </Access>

          {
            record.status === 0 ?
              <>
                <Access accessKey={"@approveVideo"}>
                  <Divider type="vertical"/>
                  <Popconfirm
                    icon={<QuestionCircleOutlined style={{ color: 'red' }}/>}
                    okText="通过"
                    cancelText="拒绝"
                    title={"确认审核结果"}
                    onConfirm={(e) => {
                      updateStatus({
                        id:record.id,
                        status:1
                      }).then(res=>{
                        actionRef.current.reload();
                      });
                    }}
                    onCancel={(e)=>{
                      updateStatus({
                        id:record.id,
                        status:2
                      }).then(res=>{
                        actionRef.current.reload();
                      });
                    }}
                  >
                    <a>审核视频</a>
                  </Popconfirm>
                </Access>

              </> : null
          }
          {
            record.status === 1 ?
              <>
                <Access accessKey={"@downVideo"}>
                  <Divider type="vertical"/>
                  <Popconfirm
                    icon={<QuestionCircleOutlined style={{ color: 'red' }}/>}
                    okText="确认下架"
                    cancelText="取消"
                    title={"确认下架该视频吗"}
                    onConfirm={(e) => {
                      updateStatus({
                        id:record.id,
                        status:3
                      }).then(res=>{
                        actionRef.current.reload();
                      });
                    }}
                  >
                    <a>下架视频</a>
                  </Popconfirm>
                </Access>

              </> : null
          }
        </>
      ),
    },
  ];
  return (
    <PageContainer>
      <ProTable
        headerTitle="视频审核列表"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        scroll={{x: 1200}}
        bordered
        request={(params, sorter, filter) => queryRule({...params, sorter, filter})}
        postData={(payload) => {
          const {list, total} = payload;
          setCount(total);
          return list || [];
        }}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
          showTitle: true,
          total: count,
          showTotal: (total) => `共${total}条`,
        }}
        columns={columns}
      />
    </PageContainer>
  );
};

export default TableList;
